<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>NLWeb Chat</title>
		<link rel="stylesheet" href="/common-chat-styles.css" />
		<link rel="stylesheet" href="/chat-page-styles.css" />
	</head>
	<body>
		<div class="app-container">
			<!-- Mobile Menu Toggle -->
			<button class="mobile-menu-toggle" id="mobile-menu-toggle">
				<svg
					width="24"
					height="24"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					stroke-width="2"
				>
					<line x1="3" y1="12" x2="21" y2="12"></line>
					<line x1="3" y1="6" x2="21" y2="6"></line>
					<line x1="3" y1="18" x2="21" y2="18"></line>
				</svg>
			</button>

			<!-- Sidebar Toggle Button (outside sidebar) -->
			<button class="sidebar-toggle" id="sidebar-toggle" title="Toggle sidebar">
				<svg
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					stroke-width="2"
				>
					<polyline points="15 18 9 12 15 6"></polyline>
				</svg>
			</button>

			<!-- Sidebar -->
			<aside class="sidebar" id="sidebar">
				<div class="sidebar-header">
					<!-- Conversations header with new button -->
					<div class="conversations-header">
						<h2 class="conversations-title">Conversations</h2>
						<button
							class="new-chat-icon-btn"
							id="new-chat-btn"
							title="New chat"
						>
							<span class="plus-icon">+</span>
						</button>
					</div>
				</div>

				<!-- Conversations list -->
				<div class="conversations-list" id="conversations-list">
					<!-- Conversation items will be dynamically added here -->
				</div>
			</aside>

			<!-- Main Chat Area -->
			<main class="main-content">
				<header class="chat-header">
					<h1 class="chat-title">New chat</h1>
					<span class="chat-site-info" id="chat-site-info">Asking all</span>
				</header>

				<div class="chat-messages" id="chat-messages">
					<div class="messages-container" id="messages-container">
						<!-- Messages will be dynamically added here -->
					</div>
				</div>

				<div class="chat-input-container">
					<div class="chat-input-wrapper">
						<div class="chat-input-box">
							<div class="input-mode-selector">
								<button
									class="mode-selector-icon"
									id="mode-selector-icon"
									title="Select mode"
								>
									<svg
										viewBox="0 0 24 24"
										fill="none"
										stroke="currentColor"
										stroke-width="2"
									>
										<rect
											x="3"
											y="3"
											width="18"
											height="18"
											rx="2"
											ry="2"
										></rect>
										<line x1="9" y1="9" x2="15" y2="9"></line>
										<line x1="9" y1="12" x2="15" y2="12"></line>
										<line x1="9" y1="15" x2="11" y2="15"></line>
									</svg>
								</button>
								<div class="mode-dropdown" id="mode-dropdown">
									<div class="mode-dropdown-header">Select mode</div>
									<div class="mode-dropdown-item" data-mode="list">List</div>
									<div class="mode-dropdown-item" data-mode="summarize">
										Summarize
									</div>
									<div class="mode-dropdown-item" data-mode="generate">
										Generate
									</div>
								</div>
							</div>
							<textarea
								class="chat-input"
								id="chat-input"
								placeholder="Send a message..."
								rows="1"
							></textarea>
							<button class="send-button" id="send-button">
								<svg
									viewBox="0 0 24 24"
									fill="none"
									stroke="currentColor"
									stroke-width="2"
								>
									<line x1="22" y1="2" x2="11" y2="13"></line>
									<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
								</svg>
								Send
							</button>
						</div>
					</div>
				</div>
			</main>
		</div>

		<script type="module" src="/fp-chat-interface.js"></script>
	</body>
</html>
